<template>
    {{ a }}
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="车牌号：" prop="fuelcostsLicensePlate">
      <el-input v-model="ruleForm.fuelcostsLicensePlate" placeholder="请输入车牌号" />
    </el-form-item>
    <el-form-item label="加油费用/元：" prop="fuelcostsFuelFee">
      <el-input v-model="ruleForm.fuelcostsFuelFee" placeholder="请输入加油费用" />
    </el-form-item>
    <el-form-item label="加油量/L：" prop="fuelcostsRefuelingVolume">
      <el-input v-model="ruleForm.fuelcostsRefuelingVolume" placeholder="请输入加油量" />
    </el-form-item>
    <el-form-item label="起始公里数：" prop="fuelcostsOriginate">
      <el-input v-model="ruleForm.fuelcostsOriginate" placeholder="请输入起始公里数" />
    </el-form-item>
    <el-form-item label="支付方式：" prop="fuelcostsPayType">
      <el-radio-group v-model="ruleForm.fuelcostsPayType" >
        <el-radio value="微信支付">微信支付</el-radio>
        <el-radio value="支付宝支付">支付宝支付</el-radio>
        <el-radio value="银联支付">银联支付</el-radio>
        <el-radio value="企业转账">企业转账</el-radio>
        <el-radio value="线下支付">线下支付</el-radio>
        <el-radio value="其他">其他</el-radio>
        <el-input style="width: 200px;"  v-if='ruleForm.fuelcostsPayType=="其他"' v-model="ruleForm.fuelcostsOther"  placeholder="请输入其他支付方式" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="经办人：" prop="fuelcostsAttn">
      <el-input v-model="ruleForm.fuelcostsAttn" placeholder="请输入经办人" />
    </el-form-item>
    <el-form-item label="备注：" prop="fuelcostsRemark">
      <el-input v-model="ruleForm.fuelcostsRemark" type="textarea" placeholder="请输入备注信息"  />
    </el-form-item>
  </el-form>
</template>
<script setup lang=ts>
import { useRoute } from 'vue-router'
const route = useRoute();
const a = route.query.fuelcostsId
import { reactive, ref,onMounted } from 'vue'
import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//生命周期函数钩
onMounted(function () {
    fantian();
})
//添加字段
const ruleForm = reactive({
    fuelcostsLicensePlate: "",
    fuelcostsFuelFee: "",
    fuelcostsRefuelingVolume: "",
    fuelcostsOriginate: "",
    fuelcostsPayType: "",
    fuelcostsOther:"",
    fuelcostsAttn: "",
    fuelcostsRemark: "",
    createDate: "",
    fuelcostsId:route.query.fuelcostsId
})
//反填方法
const fantian = () => {
    axios.get("FoundationRead/api/Fuelcosts/BackfillFuelcosts", {
        params: {
            fuelcostsId:route.query.fuelcostsId
        }
    })
        .then(res => {
            ruleForm.fuelcostsLicensePlate = res.data.data.fuelcostsLicensePlate;
            ruleForm.fuelcostsFuelFee = res.data.data.fuelcostsFuelFee;
            ruleForm.fuelcostsRefuelingVolume = res.data.data.fuelcostsRefuelingVolume;
            ruleForm.fuelcostsOriginate = res.data.data.fuelcostsOriginate;
            ruleForm.fuelcostsPayType = res.data.data.fuelcostsPayType;
            ruleForm.fuelcostsOther = res.data.data.fuelcostsOther;
            ruleForm.fuelcostsAttn = res.data.data.fuelcostsAttn;
            ruleForm.fuelcostsRemark = res.data.data.fuelcostsRemark;
            ruleForm.createDate = res.data.data.createDate;
            console.log(res.data.data)
    })
}

</script>